<template>
    <div class="technological">
        <div class="technological-top">
            <a-form-model :model="SearchForm" layout="inline" :colon="false">
                <a-row>
                    <a-col :span="22">
                        <a-form-model-item label="流程名称" prop="name">
                            <a-input v-model="SearchForm.name" autocomplete />
                        </a-form-model-item>
                        <a-form-model-item>
                            <a-button type="primary" @click="searchFn">搜索</a-button>
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="2" style="text-align: right;">
                        <a-button type="primary" @click="()=>{addTechnological = true,title='审核流程添加'}">添加流程</a-button>
                    </a-col>
                </a-row>

            </a-form-model>

        </div>
        <div class="technological-bottom">
            <div class="technological-bottom__left">
                <a-table :columns="columns" :data-source="tableData" rowKey="id" :customRow="rowclickFn" :pagination="false">
                    <template slot="isEnable" slot-scope="text">
                        <a-switch default-checked :checked="text" />
                    </template>
                    <div slot="action" slot-scope="text,record" class="flexbox">
                        <a-button type="primary" @click="edit(record)">修改</a-button>
                        <a-button type="danger" @click="del(record.id)">删除</a-button>
                        <a-button v-if="record.reviewDetailsInfoPo==null" type="primary" @click="addDetailed('-1')">添加详情</a-button>
                    </div>
                </a-table>
            </div>
            <div class="technological-bottom__right">
                <a-steps direction="vertical" :current="-1">
                    <a-step :title="v.name" v-for="(v,i) in stepsData" :key="i">
                        <div slot="description" class="stepContent">
                            <div style="min-height:40px;width:56%">
                                <a-tag color="blue" v-for="(item,index) in v.userInfoList" :key="index">{{item.nickname}}</a-tag>
                            </div>
                            <div class="active">
                                <a-button type="primary" size="small" @click="addDetailed(v.id)" v-if="v.reviewDetailsInfoPo==null">添加</a-button>
                                <a-button type="primary" size="small" @click="addUser(v)">人员绑定</a-button>
                                <a-button type="warning" size="small" @click="processEdit(v)">修改</a-button>
                                <a-button type="danger" size="small" @click="AxamineDel(v.id)" v-if="v.reviewDetailsInfoPo==null">删除</a-button>
                            </div>
                        </div>
                    </a-step>
                </a-steps>
            </div>
        </div>
        <!-- 审核流程添加 -->
        <a-modal v-model="addTechnological" width="50%" :title="title" centered @cancel="()=>{TechnologicalForm ={name: '',isEnable: true}}" :maskClosable="false" destroyOnClose>
            <a-form-model ref="ruleForm" :rules="Technologicalrules" :model="TechnologicalForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" :colon="false">
                <a-form-model-item label="审核名字" prop="name">
                    <a-input v-model="TechnologicalForm.name" autocomplete />
                </a-form-model-item>
                <a-form-model-item label="是否启用">
                    <a-switch default-checked v-model="TechnologicalForm.isEnable" />
                </a-form-model-item>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="SubmitFn">确定</a-button>
            </template>
        </a-modal>
        <!-- 审核流程详细添加 -->
        <a-modal v-model="addAxamine" width="50%" :title="titleAxamine" centered @cancel="()=>{AxamineForm.name = '';AxamineForm.parentId = '';AxamineForm.rangeValue = '';}" :maskClosable="false" destroyOnClose>
            <a-form-model ref="AxamineruleForm" :rules="Axaminerules" :model="AxamineForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" :colon="false">
                <a-form-model-item label="审核流程名称" prop="name">
                    <a-input v-model="AxamineForm.name" autocomplete />
                </a-form-model-item>
                <a-form-model-item label="审核范围">
                    <a-input v-model="AxamineForm.rangeValue" autocomplete />
                </a-form-model-item>
            </a-form-model>
            <template slot="footer">
                <a-button type="primary" @click="AxamineSubmitFn">确定</a-button>
            </template>
        </a-modal>
        <!-- 审核详细人员添加 -->
        <a-modal v-model="addUserPop" width="50%" title="人员绑定" centered @cancel="()=>{UserForm={id: '',userIds: []}}" :maskClosable="false" destroyOnClose>
            <div class="selectbox">
                <span>人员绑定</span>
                <a-select mode="multiple" v-model="UserForm.userIds" optionFilterProp="title" style="width: 80%" placeholder="请选择审批人员">
                    <a-select-option v-for="(v,i) in UserSelect" :value="v.id" :title="v.nickname" :key="i">
                        {{v.nickname}}
                    </a-select-option>
                </a-select>
            </div>
            <template slot="footer">
                <a-button type="primary" @click="UserSubmitFn">确定</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script>
const columns = [
    {
        title: "流程名称",
        dataIndex: "name",
        align: "center",
    },
    {
        title: "是否启用",
        dataIndex: "isEnable",
        scopedSlots: { customRender: "isEnable" },
        align: "center",
    },
    {
        title: "操作",
        scopedSlots: { customRender: "action" },
        align: "center",
    },
];
export default {
    data() {
        return {
            title: "",
            titleAxamine: "",
            addTechnological: false, // 审核流程弹框
            addAxamine: false, //  审核流程详细
            addUserPop: false, // 绑定人员
            SearchForm: {
                name: "",
            },
            TechnologicalForm: {
                name: "",
                isEnable: true,
            },
            AxamineForm: {
                parentId: "", // 上级流程
                name: "", //  流程详细名称
                rangeValue: "", // 审核范围
                reviewId: "", //  流程节点id
            },
            UserForm: {
                id: "",
                userIds: [],
            },
            Technologicalrules: {
                name: [
                    {
                        required: true,
                        message: "流程详细名称必填",
                        trigger: "change",
                    },
                ],
            },
            Axaminerules: {
                name: [
                    {
                        required: true,
                        message: "审核流程名称必填",
                        trigger: "change",
                    },
                ],
            },
            columns,
            tableData: [], // 表格数据
            stepsData: [], // 步骤条
            UserSelect: [], // 人员下拉
        };
    },
    methods: {
        // 添加流程详情
        addDetailed(index) {
            this.titleAxamine = "流程详细添加";
            this.AxamineForm.parentId = index;
            this.addAxamine = true;
        },
        // 流程详细确定
        AxamineSubmitFn() {
            console.log(this.AxamineForm);
            this.$refs.AxamineruleForm.validate((valid) => {
                if (valid) {
                    if (this.titleAxamine == "流程详细添加") {
                        ``;
                        this.$api
                            .reviewDetailsSave(this.AxamineForm)
                            .then((res) => {
                                console.log(res.data);
                                if (res.data.data == true) {
                                    this.reviewFindByPage();
                                    this.addAxamine = false;
                                    this.AxamineForm.name = "";
                                    this.AxamineForm.parentId = "";
                                    this.AxamineForm.rangeValue = "";
                                }
                            });
                    } else {
                        this.$api
                            .reviewEditDetail(this.AxamineForm)
                            .then((res) => {
                                console.log(res.data);
                                if (res.data.code == 0) {
                                    this.reviewFindByPage();
                                    this.addAxamine = false;
                                    this.AxamineForm = {
                                        parentId: "", // 上级流程
                                        name: "", //  流程详细名称
                                        rangeValue: "", // 审核范围
                                        reviewId: "", //  流程节点id
                                    };
                                }
                            });
                    }
                }
            });
        },

        // 修改流程详情
        processEdit(data) {
            this.titleAxamine = "流程详细修改";
            this.AxamineForm.name = data.name;
            this.AxamineForm.rangeValue = data.rangeValue;
            this.AxamineForm.parentId = data.parentId;
            this.AxamineForm.id = data.id;
            this.addAxamine = true;
        },
        // 点击表格行
        rowclickFn(record) {
            let then = this;
            return {
                on: {
                    click() {
                        then.AxamineForm.reviewId = record.id;
                        then.stepsData = [];
                        if (record.reviewDetailsInfoPo) {
                            then.a(record);
                        }
                    },
                },
            };
        },
        // 流程控制管理弹窗
        SubmitFn() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    if (this.title == "审核流程添加") {
                        this.$api
                            .reviewSave(this.TechnologicalForm)
                            .then((res) => {
                                if (res.data.data == true) {
                                    this.addTechnological = false;
                                    this.TechnologicalForm = {
                                        name: "",
                                        isEnable: true,
                                    };
                                    this.reviewFindByPage();
                                }
                            });
                    } else {
                        this.$api
                            .reviewEdit(this.TechnologicalForm)
                            .then((res) => {
                                if (res.data.data == true) {
                                    this.addTechnological = false;
                                    this.TechnologicalForm = {
                                        name: "",
                                        isEnable: true,
                                    };
                                }
                                this.reviewFindByPage();
                            });
                    }
                }
            });
        },

        // 流程控制表格修改按钮
        edit(data) {
            this.title = "审核流程修改";
            this.TechnologicalForm = data;
            this.addTechnological = true;
        },
        // 流程控制表格删除按钮
        del(id) {
            let _that = this;
            this.$confirm({
                title: "是否确认删除?",
                onOk() {
                    _that.$api.reviewRemove(id).then((res) => {
                        if (res.data.data == true) {
                            _that.$message.info("删除成功");
                            _that.AxamineForm.reviewId = "";
                            _that.stepsData = [];
                            _that.reviewFindByPage();
                        }
                    });
                },
                onCancel() {
                    console.log("Cancel");
                },
                class: "delk",
            });
        },
        // 详细删除
        AxamineDel(id) {
            let _that = this;
            this.$confirm({
                title: "是否确认删除?",
                onOk() {
                    _that.$api.reviewRemoveDetails(id).then((res) => {
                        if (res.data.data == true) {
                            _that.$message.info("删除成功");
                            _that.reviewFindByPage();
                        }
                    });
                },
                onCancel() {
                    console.log("Cancel");
                },
                class: "delk",
            });
        },
        // 获取流程控制列表
        reviewFindByPage() {
            this.$api.reviewFindByPage(this.SearchForm).then((res) => {
                if (res.data.code == 0) {
                    this.tableData = res.data.data;
                    if (this.AxamineForm.reviewId) {
                        console.log(this.AxamineForm.reviewId)
                        this.tableData.forEach((v) => {
                            if (this.AxamineForm.reviewId == v.id) {
                                this.rowclickFn(v).on.click();
                            }
                        });
                    }
                } else {
                    tihs.$message.error(res.data.errorMessage);
                }
            });
        },
        a(record) {
            if (
                record.reviewDetailsInfoPo &&
                record.reviewDetailsInfoPo != null
            ) {
                this.stepsData.push(record.reviewDetailsInfoPo);
                this.a(record.reviewDetailsInfoPo);
            }
        },
        // 绑定人员
        addUser(data) {
            this.addUserPop = true;
            this.UserForm.id = data.id;
            if (data.userInfoList && data.userInfoList != null) {
                data.userInfoList.forEach((v) => {
                    this.UserForm.userIds.push(v.id);
                });
            }
        },
        searchFn() {
            this.AxamineForm = {
                parentId: "", // 上级流程
                name: "", //  流程详细名称
                rangeValue: "", // 审核范围
                reviewId: "", //  流程节点id
            };
            this.stepsData = [];
            this.reviewFindByPage();
        },
        // 人员确定
        UserSubmitFn() {
            // console.log(this.UserForm);
            this.$api.ReviewSaveReviewUser(this.UserForm).then((res) => {
                console.log(res.data);
                if (res.data.code == 0) {
                    this.addUserPop = false;
                    this.UserForm = {
                        id: "",
                        userIds: [],
                    };
                    this.reviewFindByPage();
                } else {
                    this.$message.error(res.data.errorMessage);
                }
            });
        },
    },
    mounted() {
        this.reviewFindByPage();
        this.$api.getUserList({ current: 1, size: 10000 }).then((res) => {
            if (res.data.code == 0) {
                this.UserSelect = res.data.data;
            } else {
            }
        });
    },
};
</script>

<style lang="scss" scoped>
.technological {
    width: 100%;
    height: 100%;
    padding: 1%;
    .technological-top {
        width: 100%;
        height: 8%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .technological-bottom {
        width: 100%;
        height: 92%;
        border-top: 1px solid #1890ff;
        box-sizing: border-box;
        display: flex;
        .technological-bottom__left {
            width: 44%;
            height: 100%;
            padding-right: 14px;
            padding-top: 14px;
            box-sizing: border-box;
            border-right: 1px solid #1890ff;
            .flexbox {
                .ant-btn {
                    margin-right: 10px;
                }
            }
        }
        .technological-bottom__right {
            width: 56%;
            height: 100%;
            padding-left: 14px;
            padding-top: 14px;
            box-sizing: border-box;
            .stepContent {
                width: 100%;
                height: 100%;
                position: relative;
                .active {
                    width: 40%;
                    position: absolute;
                    right: 0;
                    top: 0;
                    .ant-btn {
                        margin-right: 10px;
                    }
                }
            }
        }
    }
}
.selectbox {
    height: 300px;
    span {
        font-size: 16px;
        margin-right: 20px;
    }
}

// 步骤条样式
// ::v-deep .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title{
//     color: rgba(255,255,255,0.8);
// }

</style>